<template>
    <div class="register-container">
      <h2>用户注册</h2>
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="username">用户名</label>
          <input
            type="text"
            id="username"
            v-model="form.username"
            placeholder="请输入用户名"
            required
          />
        </div>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input
            type="email"
            id="email"
            v-model="form.email"
            placeholder="请输入邮箱"
            required
          />
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input
            type="password"
            id="password"
            v-model="form.password"
            placeholder="请输入密码"
            required
          />
        </div>
        <div class="form-group">
          <label for="confirmPassword">确认密码</label>
          <input
            type="password"
            id="confirmPassword"
            v-model="form.confirmPassword"
            placeholder="请再次输入密码"
            required
          />
        </div>
        <button type="submit">注册</button>
      </form>
      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
      <p v-if="successMessage" class="success-message">{{ successMessage }}</p>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        form: {
          username: '',
          email: '',
          password: '',
          confirmPassword: '',
        },
        errorMessage: '',
        successMessage: '',
      };
    },
    methods: {
      validateForm() {
        if (this.form.password !== this.form.confirmPassword) {
          this.errorMessage = '两次输入的密码不一致';
          return false;
        }
        if (this.form.username.length < 3) {
          this.errorMessage = '用户名至少需要 3 个字符';
          return false;
        }
        if (this.form.password.length < 6) {
          this.errorMessage = '密码至少需要 6 个字符';
          return false;
        }
        this.errorMessage = '';
        return true;
      },
      async handleSubmit() {
        if (!this.validateForm()) {
          return;
        }
  
        try {
          const response = await axios.post('/api/register', {
            username: this.form.username,
            email: this.form.email,
            password: this.form.password,
          });
  
          if (response.data.success) {
            this.successMessage = '注册成功！';
              // 注册成功后跳转到首页
          this.$router.push({ name: 'Home' });

            this.errorMessage = '';
            // 重置表单
            this.form.username = '';
            this.form.email = '';
            this.form.password = '';
            this.form.confirmPassword = '';
          } else {
            this.errorMessage = response.data.message || '注册失败，请重试';
          }
        } catch (error) {
          this.errorMessage = '注册失败，请检查网络或稍后重试';
          console.error('注册失败:', error);
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .register-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }
  
  input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  button {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #218838;
  }
  
  .error-message {
    color: red;
    margin-top: 10px;
  }
  
  .success-message {
    color: green;
    margin-top: 10px;
  }
  </style>